<template>
  <div class="fc_333">
    <div v-show="modifyType === 0">
      <div class="ub bg_w ub-ac ub-pj wd_100 pad_1 bs_bb">
        <div class="ub ub-ac">真实姓名：</div>
        <input class="ub bg_w holder_d input_border" :placeholder="userModify.userInfo.userLinkMan" v-model="pname">
      </div>
    </div>
    <div v-show="modifyType === 1">
      <div class="ub bg_w ub-ac ub-pj wd_100 pad_1 bs_bb">
        <div class="ub ub-ac" style="position:relative;">
          <div class="ub ub-ac ub-pc" @click="showId">
            <div class="ub idsel ub-pc">{{idType}}</div>
            <div class="ub downA ub-img1"></div>
          </div>
          <div class="sel_box bg_w" v-show="showIdSel">
            <div class="ub ub-ver">
              <div class="ub pad_05" @click="selType(0)">身份证</div>
              <div class="ub pad_05" @click="selType(1)">护照</div>
              <div class="ub pad_05" @click="selType(2)">其它</div>
            </div>
          </div>
        </div>
        <input class="ub bg_w holder_d input_border" :placeholder="userModify.userInfo.userLinkNumber" v-model="idNum">
      </div>
    </div>
    <div v-show="modifyType === 2">
      <div class="ub bg_w ub-ac ub-pj wd_100 pad_1 bs_bb">
        <div class="ub ub-ac">联系电话：</div>
        <input class="ub bg_w holder_d input_border" :placeholder="userModify.userInfo.userLinkPhone" v-model="linkPhone">
      </div>
    </div>
    <div v-show="modifyType === 3">
      <div class="ub bg_w ub-ac ub-pj wd_100 pad_1 bs_bb">
        <div class="ub ub-ac">联系邮箱：</div>
        <input class="ub bg_w holder_d input_border" :placeholder="userModify.userInfo.userLinkEmail" v-model="email">
      </div>
    </div>
    <div class="ub commit mar_05 ub-pc ub-ac" @click='commit'>
      <div>保存</div>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
import { mapState } from 'vuex';
export default {
  name: 'userModify',
  created: function () {
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '资料修改',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    this.pname = this.userModify.userInfo.userLinkMan;
    this.linkPhone = this.userModify.userInfo.userLinkPhone;
    this.email = this.userModify.userInfo.userLinkEmail
    // console.log(this.$router)
    this.idNum = this.userModify.userInfo.userLinkNumber
    this.modifyType = this.userModify.modify;
    this.idType = this.userModify.userInfo.userLinkType || '身份证';
    // this.$store.commit('setChangeData', this.userModify.userInfo); // 进入后重置
  },
  computed: mapState(['loginData', 'userModify']),
  data: function () {
    return {
      modifyType: '',
      showIdSel: false,
      idType: '',
      idNum: '',
      email: '',
      pname: '',
      linkPhone: ''
    };
  },
  components: {
  },
  methods: {
    showId: function () {
      // console.log('show');
      this.showIdSel = !this.showIdSel;
    },
    selType: function (type = 0) {
      const typeArr = ['身份证', '护照', '其它'];
      this.showId();
      let str = typeArr[type]
      // this.$store.commit('changProp', [{ name: 'userLinkType', value: str }]);
      this.idType = str;
    },
    commit: function () {
      let self = this;
      let strArr = ['userLinkMan', 'userLinkNumber', 'userLinkPhone', 'userLinkEmail'];
      let type = this.modifyType;
      console.log(type)
      let proName = strArr[type];
      let value = '';
      switch (type) {
        case 0:
          // console.log('in1');
          value = this.$utils.regTest(this.pname, 'anyName', this);
          break;
        case 1:
          // console.log('in2');
          let action = this.idType === '身份证' ? 'id' : 'passport';
          value = this.$utils.regTest(this.idNum, action, this);
          this.$store.commit('changProp', [{ name: 'userLinkType', value: this.idType }]);
          break;
        case 2:
          // console.log('in3');
          value = this.$utils.regTest(this.linkPhone, 'phoneNum', this);
          break;
        case 3:
          // console.log('in4');
          value = this.$utils.regTest(this.email, 'email', this);
          break;
      }
      if (!value) {
        return false;
      }
      console.log(value)
      this.$store.commit('changProp', [{ name: proName, value: value }]);
      let userInfo = this.userModify.userInfo;
      let content = {
        'userLinkNumber': userInfo.userLinkNumber || '',
        'userMobile': userInfo.userMobile || '',
        'userLinkType': userInfo.userLinkType || '',
        'userLinkMan': userInfo.userLinkMan || '',
        'userLinkEmail': userInfo.userLinkEmail || '',
        'userIcon': userInfo.userIcon || '',
        'userId': userInfo.userId + '',
        'userLinkPhone': userInfo.userLinkPhone || ''
      }
      let data = this.$utils.getUserContent(content);
      let loginData = this.loginData.userInfo;
      if (!userInfo) {
        this.$router.push('/login');
      }
      let userId = loginData.userId + '';
      let loginToken = loginData.token.loginToken;
      data.headers.userId = userId;
      data.headers.loginToken = loginToken;
      console.log(data);
      this.$store.commit('setFresh', true);
      let me = this;
      this.$utils.ajax(data, 'modify', me, function () {
        let content = {
          text: '修改成功',
          callback: function () {
            self.$router.go('-1');
          }
        }
        me.$store.dispatch('showTx', content);
      });
    }
  }
};
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.downA
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_down@2x.png');
  margin-left: f_times(0.3);
.sel_box
  position: absolute;
  z-index: 10;
  left: f_times(0.6);
  top: f_times(1.6);
  border: 1px solid #f2f2f2;
.sel_box > div
  width: f_times(4);
.idsel
  width: f_times(3);
.commit
  background-color: $bgCol;
  color: $fontCol;
  width: 100% - f_times(0.3);
  box-sizing: border-box;
  height: f_times(2.5);
  border-radius: 3px;
  margin-top: f_times(1.5);
.input_border
  outline: 1px solid #f2f2f2;
  box-sizing: border-box;
</style>